<template>
  <div class="header">
    <div class="top">
      <div class="top-l">
        <div class="logo"><a href="/"></a></div>
      </div>
      <div class="top-r">
        <!-- <div class="sear">&nbsp;</div> -->
        <div class="app">
          <img src="../assets/img/app.png" alt="" />
          <a href="javascript:;">微信小程序</a>
          <ul>
            <img src="../assets/img/qrcode.png" alt="" style="width: 100%;height: 100%;" />
          </ul>
        </div>
        <div class="ruzhu">
          <img src="../assets/img/ruzhu.png" alt="">
          <a target="_blank" href="//dzsbyjx.com/">八益驾校</a>
        </div>
        <div class="houtai">
          <img src="../assets/img/houtai.png" alt="">
          <a target="_blank" href="//dzsyxzx.com/">元翔职校</a>
        </div>
        <div class="login" v-if="user.phoneNo" @click="loginOutFn">
          <span style="margin-left: 15px;">{{ greet }}，{{ user.phoneNo }}</span>
          <a href="javascript:;"><img class="loginout" src="../assets/img/loginout.png" alt="">退出</a>
        </div>
        <div class="login" v-else>
          <a href="/#/login">登录</a>
        </div>
      </div>
    </div>
    <div class="menu tabMenu">
      <ul>
        <template v-for="(item, index) in navData" :key="index">
          <li :class="item.active === navIndex ? 'active' : ''"><router-link :to="`/${item.url}/${item.children[0].id}`">{{ item.name }}</router-link>
          </li>
        </template>
      </ul>
    </div>
  </div>
  <div class="crumbs" v-show="crumbsVisible">
    <!-- <span> {{ navData[navIndex].name }} </span> || <span>{{ navData[navIndex].children[navInd].name }}</span> -->
    <el-breadcrumb :separator-icon="DArrowRight">
      <template v-for="(item, index) in crumbData" :key="index">
        <el-breadcrumb-item :to="{ path: item.url }" v-if="item.url">{{ item.name }}</el-breadcrumb-item>
        <el-breadcrumb-item v-else>{{ item.name }}</el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script setup>
import { DArrowRight } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, getCurrentInstance, watch, defineProps } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()
import { useNavStore } from '@/stores/nav.store.js';
const navStore = useNavStore()
const navData = ref(navStore.listData || [])
const navIndex = ref(0)
const navInd = ref(0)
const { $api } = getCurrentInstance().appContext.config.globalProperties;
const user = ref({})
const greet = ref('您好')
const crumbsVisible = ref(true)
const crumbData = ref([])
const props = defineProps({
  crumbs: {
    type: Array,
    default: []
  }
})

// 显示隐藏面包屑
if (route.name === 'type-subject-exam') {
  crumbsVisible.value = false;
}
// 用户缓存信息存在
if (localStorage.getItem('user')) {
  user.value = JSON.parse(localStorage.getItem('user'))
}
// 问候词
if (new Date().getHours() < 12) {
  greet.value = '上午好';
} else {
  greet.value = '下午好';
}
// 设置导航下标
const setNavIndexIndFn = () => {
  navData.value.forEach((item, index) => {
    if (item.url === route.params.type) {
      navIndex.value = index;
    }
    if (route.params.subject) {
      item.children.forEach((ite, ind) => {
        if (ite.id === Number(route.params.subject)) {
          navInd.value = ind;
          crumbData.value = [{
            name: ite.name,
            url: `/${route.params.type}/${route.params.subject}`
          }]
          if (props.crumbs.length > 0) {
            crumbData.value = [...crumbData.value, ...props.crumbs]
          }
        }
      })
    }
  })
}
setNavIndexIndFn()
// 监听
watch([() => route.params], (val) => {
  if (val[0].type && val[0].subject) {
    setNavIndexIndFn()
  }
})
// 获取用户信息
const getUserFn = () => {
  // token存在 user不存在
  if (localStorage.getItem('token') && !localStorage.getItem('user')) {
    $api.getUserInfoApi().then((res) => {
      if (res.errno === 0) {
        user.value = res.result;
        localStorage.setItem('user', JSON.stringify(res.result))
        return false;
      }
    })
  }
}
getUserFn()
// 退出
const loginOutFn = () => {
  ElMessageBox.confirm('是否退出当前用户？', '系统提示', {
    showClose: false
  }).then(() => {
    $api.logoutApi().then((res) => {
      if (res.errno === 0) {
        localStorage.removeItem('token')
        localStorage.removeItem('user')
        router.replace('/login')
        return false;
      }
    })
  }).catch(() => { })
}
</script>

<style lang="scss">
@import '../assets/css/publicHeader.css';

.top-r .sear {
  width: 220px;
  float: left;
}

.app:hover ul {
  width: 174px;
  height: 174px;
  display: block;
}

.loginout {
  width: 22px;
  height: 22px;
  display: inline-block;
  vertical-align: middle;
}
</style>